<template>
  <div class="app-container">
    <div class="left">
      <div class="login_box">
        <div class="login_title">登录</div>
        <client-only>
          <el-form
            :model="loginInfo"
            :rules="loginRules"
            ref="loginForm"
            class="demo-ruleForm"
          >
            <el-form-item prop="userName">
              <p class="inp_title">账号名称</p>
              <el-input
                class="inp_text"
                name="userName"
                type="text"
                v-model="loginInfo.userName"
                placeholder="请输入账号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <p class="inp_title">密码</p>
              <el-input
                class="inp_text"
                name="password"
                type="password"
                v-model="loginInfo.password"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <button class="onSubmit" @click.prevent="onSubmit">登录</button>
              <a href="#" class="tit_white">忘记您的密码？</a>
            </el-form-item>
          </el-form>
        </client-only>
      </div>
    </div>
    <div class="right">
      <p>加入平台，探索更多精彩游戏。</p>
      <a href="#" class="tit_white" style="font-size: 14px">了解更多</a>
      <img
        src="https://www.xclove.xyz/gameMallImg/login_join_pc.png"
        width="100%"
        style="display: block; margin-bottom: 20px"
        alt=""
      />
      <p>免费加入且简单易用</p>
      <a href="/join" class="join_btn">加入平台</a>
    </div>
  </div>
</template>
<script>
import Cookie from "js-cookie";
import loginApi from "/api/login";
export default {
  data() {
    // 用户名校验
    var userName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      }
      callback();
    };
    // 密码校验
    var password = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      }
      callback();
    };
    return {
      loginInfo: {
        userName: "",
        password: "",
      },
      loginRules: {
        userName: [{ validator: userName, trigger: "blur" }],
        password: [{ validator: password, trigger: "blur" }],
      },
    };
  },
  mounted() {},
  methods: {
    onSubmit() {
      this.$refs["loginForm"].validate((valid) => {
        if (valid) {
          loginApi
            .getToken(this.loginInfo)
            .then((res) => {
              this.$message.success("登陆成功");
              Cookie.set("gameMall_token", res.token);
            })
            .then(() => {
              loginApi.getUserInfo().then((res) => {
                // console.log(res.data);
                Cookie.set("userInfo", JSON.stringify(res.data));
                // 登陆成功跳转回首页;
                location.href = "/";
              });
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
.app-container {
  width: 100%;
  height: 800px;
  font-size: 14px;
  background: url("https://www.xclove.xyz/gameMallImg/login_bg.jpg") no-repeat;
  background-size: cover;
  display: flex;
  color: #b8b6b4;
}

.app-container .left {
  width: 80%;
  height: 100%;
  padding: 20px;
}
/* 登录盒子 */
.app-container .left .login_box {
  width: 300px;
  margin: 80px auto;
}
.app-container .left .login_box .inp_title {
  font-size: 14px;
  color: #b8b6b4;
}
::v-deep .inp_text .el-input__inner {
  width: 300px;
  padding: 10px 6px;
  color: #e9e9e9;
  border-radius: 3px;
  background-color: #32353c;
  border: 1px solid #26282d;
}

.app-container .left .login_box .login_title {
  color: #fff;
  font-size: 34px;
  margin: 20px 0;
  text-align: center;
}

.app-container .left .login_box .onSubmit {
  width: 192px;
  height: 38px;
  color: #c3e1f8;
  display: block;
  font-size: 14px;
  background: linear-gradient(90deg, #3da3f1, #2460d0);
  border: none;
  border-radius: 2px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.app-container .left .login_box .onSubmit:hover {
  background: linear-gradient(90deg, #5dc6ff, #4396ed);
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.app-container .tit_white {
  display: block;
  margin-top: 20px;
  text-align: center;
  color: #fff;
  font-size: 12px;
}
.app-container .tit_white:hover {
  color: #66c0f4;
}
/* 加入平台 */
.app-container .right {
  width: 20%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.01));
  padding-top: 100px;
  text-align: center;
  overflow: hidden;
}
.app-container .right .join_btn {
  display: inline-block;
  width: 123px;
  height: 33px;
  line-height: 33px;
  font-size: 14px;
  color: #fff;
  border: 1px solid #74797f;
  border-radius: 2px;
  margin-top: 20px;
}
.app-container .right .join_btn:hover {
  border: 1px solid #ffffff;
}
</style>